<template>
  <div class="wallpaper">
    <van-tabs v-model="active" swipeable @change="onChange" animated>
      <van-tab v-for="(item, index) in categories" :title="item.name" :key="index" :name="item.id">
        <div class="swiper-content">
          <virtual-list class="list-infinite scroll-touch" :keeps="15" data-key="id" :data-sources="infinity[index].items" :data-component="itemComponent" :estimate-size="70" :item-class="'list-item-infinite'" :footer-class="'loader-wrapper'" @tobottom="onScrollToBottom(index)">
            <div slot="footer" class="loader" v-if="!infinity[index].stop"></div>
            <div class="no-data" slot="footer" v-else>暂无更多数据</div>
          </virtual-list>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import Item from "../components/item.vue"
import API from "../api/wallpaper"

export default {
  data() {
    return {
      search: {
        keyword: "",
        start: 0,
        count: 10
      },
      active: 0,
      categories: [],
      infinity: [],
      itemComponent: Item
    }
  },
  async created() {
    const res = await API.getAllCategory()
    if (Array.isArray(res.data)) {
      this.categories = res.data.map(v => {
        this.infinity.push({
          items: [],
          stop: false,
          count: 10,
          start: 0,
          isLoading: false
        })
        return { ...v, text: v.name, value: v.id }
      })
      const details = await this.getCategoryDetail(this.categories[this.active].id, 0)
      this.infinity.splice(0, 1, {
        items: details,
        itemComponent: Item,
        stop: false,
        count: 10,
        start: 0,
        isLoading: false
      })
    }
  },
  methods: {
    async getCategoryDetail(cid, start, count = 10) {
      const res = await API.getCategoryDetail(cid, start, count)
      if (Array.isArray(res.data)) {
        return res.data
      }
      return []
    },
    onChange(id) {
      let index = this.categories.findIndex(v => v.id === id)
      this.onScrollToBottom(index)
    },
    async onScrollToBottom(index) {
      let target = this.infinity[index]
      target.start = target.start + target.count
      if (target.stop) return this.$toast.success("暂无更多数据")
      if (target.isLoading) return false
      target.isLoading = true
      const res = await this.getCategoryDetail(this.categories[index].id, target.start)
      target.isLoading = false
      target.items = target.items.concat(res)
      if (!res.length) {
        target.stop = true
      }
    }
  }
}
</script>
<style lang="less" scoped>
.list-infinite {
  width: 100%;
  height: calc(100vh - 44px);
  overflow-y: auto;
  border-color: rgb(27, 16, 16);
  position: relative;

  .list-item-infinite {
    display: flex;
    align-items: center;
    border-bottom: 1px solid;
    border-color: lightgray;
  }

  .loader-wrapper {
    padding: 1em;
    overflow-x: hidden;
  }

  .loader {
    font-size: 10px;
    margin: 0px auto;
    text-indent: -9999em;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ffffff;
    background: linear-gradient(to right, #9b4dca 10%, rgba(255, 255, 255, 0) 42%);
    position: relative;
    animation: load3 1.4s infinite linear;
    transform: translateZ(0);
    overflow: hidden;
  }
  .loader:before {
    width: 50%;
    height: 50%;
    background: #9b4dca;
    border-radius: 100% 0 0 0;
    position: absolute;
    top: 0px;
    left: 0;
    content: "";
  }

  .loader:after {
    background: #ffffff;
    width: 75%;
    height: 75%;
    border-radius: 50%;
    content: "";
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  @-webkit-keyframes load3 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes load3 {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
.no-data {
  text-align: center;
  padding: 5px;
  color: #333;
  font-size: 16px;
}
</style>
